<template>
    <div class="platform-org">
        <el-form :inline="true" :model="searchForm" size="mini">
            <el-form-item label="名称">
                <el-input v-model="searchForm.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="编码">
                <el-input v-model="searchForm.code" placeholder="编码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
                <el-button type="primary" @click="handleRefresh">刷新</el-button>
                <el-button type="primary" @click="handleCreate(0, {ukId: 0})">新建</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px;"
                row-key="ukId"
                border
                default-expand-all
                stripe
                size="mini"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="name"
                    label="名称"
                    sortable
                    width="*"
                    min-width="180">
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="编码"
                    sortable
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="60">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == '1'" type="success" size="mini">启用</el-tag>
                    <el-tag v-if="scope.row.status == '0'" type="danger" size="mini">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="排序"
                    width="80">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="gmtCreate"
                    label="创建时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="gmtModified"
                    label="修改时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="240">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleCreate(scope.$index, scope.row)">新建下级
                    </el-button>
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <dormitory-pagination :parent-method="listOrgTree"
                          :pagination="this.$store.state.Navigation.pagination"></dormitory-pagination>
        <el-dialog title="机构管理" :visible.sync="dialogFormVisible" :close-on-click-modal="false" label-width="80px">
            <el-form ref="form" :model="orgForm" label-width="80px">
                <el-form-item label="机构编码">
                    <el-input v-model="orgForm.code"></el-input>
                </el-form-item>
                <el-form-item label="机构名称">
                    <el-input v-model="orgForm.name"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="orgForm.status" placeholder="请选择状态">
                        <el-option label="启用" :value="1"></el-option>
                        <el-option label="停用" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="orgForm.sort" type="number" min="0" max="90000"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {listOrgTree, listOrg, createOrg, updateOrg, saveOrg, deleteOrg} from "../../../../api/platform/org"

    import DormitoryPagination from "../../components/DormitoryPagination";
    import PageSizeUtils from "../../../../utils/PageSizeUtils";

    export default {
        name: "Org",
        components: {DormitoryPagination},
        data() {
            return {
                tableData: [],
                dialogFormVisible: false,
                orgForm: {
                    code: "",
                    name: "",
                    parentId: "",
                    status: 1,
                    sort: 10000
                },
                searchForm: {
                    code: "",
                    name: ""
                },
                isUpdate: false
            };
        },

        methods: {
            listOrgTree() {
                listOrgTree("0").then(response => {
                    this.tableData = response.data.orgTree
                }).catch(error => {
                    console.log(error)
                })
            },
            listOrg(current, size) {
                listOrg(this.searchForm, current, size).then(response => {
                    this.tableData = response.data.orgs.records;
                }).catch(error => {
                    console.log(error)
                })
            },
            handleCreate(index, row) {
                this.isUpdate = false
                this.orgForm = {}
                this.orgForm.parentId = row.ukId;
                this.dialogFormVisible = true;
            },
            handleEdit(index, row) {
                this.isUpdate = true
                this.orgForm = row
                this.dialogFormVisible = true;
            },
            handleDelete(index, row) {
                deleteOrg(row.ukId).then(response => {
                    this.listOrgTree();
                }).catch(error => {
                    console.log(error)
                })
            },
            handleSearch() {
                this.listOrg(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleRefresh() {
                this.listOrg(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleReset() {
                this.searchForm = {}
            },
            handleSave() {
                if (this.isUpdate) {
                    updateOrg(this.orgForm).then(response => {
                        this.listOrgTree();
                        this.dialogFormVisible = false;
                    }).catch(error => {
                        console.log(error)
                    })
                } else {
                    createOrg(this.orgForm).then(response => {
                        this.listOrgTree();
                        this.dialogFormVisible = false;
                    }).catch(error => {
                        console.log(error)
                    })
                }
            },
            dateFormatter(row, column, cellValue, index, type) {
                let replace = cellValue.replace("T", " ");
                return replace.substring(0, 19);
            }
        },
        created() {
            PageSizeUtils.setPagination({})
            this.listOrgTree(this.$store.state.Navigation.pagination.current,
                this.$store.state.Navigation.pagination.size);
        }
    }
</script>

<style scoped>
    .platform-org {
        height: 100%;
    }

</style>